<template>
  <Page ref="page" :show-nav-bar="false" v-slot:default="{contentClass, listerData, more}" :lister="lister" style="height: 100vh;" class="bg-gray-100">
    <div :class="contentClass" class="pt-0 overflow-scroll">
      <LoadingBox v-if="pageLoading" class="w-40 h-40 absolute mt-8" style="z-index: 1; left: calc((100% - 10rem)/2)">
        <span>加载中...</span>
      </LoadingBox>

      <template v-else>
        <div class="bg-white p-3">
          <div class="flex justify-between items-center">
            <div class="flex">
              <van-image round :src="user.user.avatar" width="4rem" class=""></van-image>
              <div class="pl-2 py-2 flex items-center">
                <div class="font-bold">{{user.user.nickname}}</div>
<!--                <div class="text-gray-500 text-sm mt-1">排名 {{!number?'未上榜':number.rownum}}</div>-->
              </div>
            </div>
            <div class="text-xs flex flex-col items-center"> <!--@click="showMpQrcode=true"-->
<!--              <van-image :src="remind" width="1.4rem"></van-image>-->
<!--              <div class="mt-1 text-red-500">收益提醒</div>-->
            </div>
          </div>
          <div style="height: 4.875rem; background-color: #fd610a;" class="flex mt-4 rounded rounded-xl">
            <div style="width:10.6rem; font-size: 1.5rem;" class="bonusBox relative text-white flex items-center">
              <div class="flex">
                <span class="text-sm block ml-4 flex items-center">
                  余额
                </span>
                <span class="ml-4 block">{{(balance / 100).toFixed(2)}}</span>
              </div>
            </div>
            <div style="width:4.6rem; font-size: 1.5rem;" class="bonusBox text-white flex items-center">

            </div>
            <div class="flex-1 flex items-center">
              <van-button round block style="width: 80%; color:#fd610a; font-weight: bold; font-size: .9rem;" @click="onDraw">提现</van-button>
            </div>
          </div>
        </div>

        <div class="mt-2 p-3 bg-white">
          <div class="pt-3">
            <div class="flex bg-gray-100 mb-3 ">
              <div class="text-sm font-bold p-2 rounded-sm flex justify-center" style="width: 20%">姓名</div>
              <div class="text-sm font-bold p-2 rounded-sm" style="width: 40%">电话</div>
              <div class="text-sm font-bold p-2 rounded-sm text-right" style="width: 40%">到院时间</div>
            </div>
            <div class="flex" v-for="(el, index) in listerData.lists">
              <div class="text-sm rounded-sm p-2 flex justify-center" style="width: 20%">{{el.user_name}}</div>
              <div class="text-sm rounded-sm p-2 truncate flex items-center" style="width: 40%">{{el.user_mobile}}</div>
              <div class="text-sm rounded-sm p-2 text-right text-orange-500" style="width: 40%">{{dayjs(el.created_at).format('YYYY-MM-DD')}}</div>
            </div>
<!--            <div class="text-center text-orange-600 mt-2">-->
<!--              <a class="text-sm" v-if="page?.hasMore" @click="onMore">查看更多></a>-->
<!--              <span class="text-sm text-gray-400" v-else>没有更多了</span>-->
<!--            </div>-->
          </div>
        </div>

        <div style="height: 4rem" class="bottom-safe"></div>
        <div class="fixed bg-white w-full bottom-0 shadow flex justify-between items-center px-2" style="height: 3.125rem">
          <div class="flex items-center flex-1">
            <div class="flex flex-col justify-center px-3">
              <van-icon name="wap-home-o"  color="#fa541c" size="1.5rem"/>
              <div class="text-xs w-full" style="color:#fa541c;" @click="onHome">首页</div>
            </div>
            <div class="flex flex-col justify-center px-3">
              <van-icon name="service-o" class="text-gray-500" size="1.5rem"/>
              <div class="text-xs w-full text-gray-500" @click="showService=true">客服</div>
            </div>
          </div>
          <div class="w-4/5 flex justify-end">
            <van-button round block style="background: linear-gradient(90deg,#fa541c 0,#fa8c16);" @click="onPoster">
              <div class="text-white">
                赚更多佣金
              </div>
            </van-button>
          </div>
        </div>

        <van-popup v-model:show="showMpQrcode" class="relative rounded-lg w-3/5" style="overflow-y: initial">
          <div class="w-full">
            <div class="p-3 border-b text-center">植得公众号</div>
            <div class="border-t"></div>
            <div class="p-4">
              <van-image src="https://zdims-store.oss-cn-beijing.aliyuncs.com/common/2023-07-18/64b6531599d34.jpg"></van-image>
            </div>
          </div>
          <div class="-mb-8 text-white text-center text-xl" @click="showMpQrcode = false">
            <van-icon name="close"/>
          </div>
        </van-popup>

        <van-popup v-model:show="showService" class="relative rounded-lg w-3/5" style="overflow-y: initial">
          <div class="w-full">
            <div class="p-3 border-b text-center">植得客服</div>
            <div class="p-3">
              <div class="text-red-600 flex justify-between text-sm items-center">
                <div>
                  <van-icon name="phone" size="1rem"/>
                  <span class="ml-2">{{activity.activity.extra.service_contact}}</span>
                </div>
                <van-button size="small" color="#ff0000" :url="'tel://'+activity.activity.extra.service_contact">一键拨打</van-button>
              </div>
            </div>
            <div class="border-t"></div>
            <div class="p-4">
              <van-image :src="activity.activity.extra.service_qrcode.url"></van-image>
            </div>
          </div>
          <div class="-mb-8 text-white text-center text-xl" @click="showService = false">
            <van-icon name="close"/>
          </div>
        </van-popup>

        <van-popup v-model:show="showWithdraw" :style="{ paddingLeft: '30px', paddingRight: '21px' }" class="relative rounded-lg w-4/5" style="background: linear-gradient(0deg, rgb(255, 254, 253) 56%, rgb(255, 191, 123));">
          <div class="w-full text-xs py-8" style="line-height: 1.3rem">
            <div><b>提现规则:</b></div>
            <p class="mt-2" style="text-indent: 1rem;">您的好友通过你的专属海报，购买对应产品，您可获得好友购买金额的佣金比例。</p>
            <div class="mt-4"><b>如何查看:</b></div>
            <p class="mt-2" style="text-indent: 1rem;">可在邀请明细查看具体的返佣金额。</p>
            <div class="mt-4"><b>提现:</b></div>
            <p class="mt-2" style="text-indent: 1rem;">好友通过你的专属二维码购买产品后，你的佣金将在活动结束后统一结算佣金，佣金记录可在我的钱包中查看。</p>
            <van-button round block style="background: linear-gradient(90deg,#fa541c 0,#fa8c16); margin-top: 1.5rem;" @click="showWithdraw=false">
              <div class="text-white">
                我知道了
              </div>
            </van-button>
          </div>
        </van-popup>

      </template>
    </div>
  </Page>
</template>

<script setup>
import {provide, ref} from 'vue';
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import Page from "../components/Page.vue"
import {computed, onMounted, watch} from "vue";
import apis from '../apis'
import dayjs from 'dayjs';

import LoadingBox from "../components/LoadingBox.vue";
import remind from "../assets/images/remind.png"
import invite from "../assets/images/invite.png"
import assistance from "../assets/images/assistance.png"
import rankTitle from "../assets/images/rank-title.png"


const store = useStore()
const router = useRouter()
const route = useRoute()

const user = computed(() => store.state.user)
const touchUser = ref(null)
const wallet = ref(null)

const page = ref(null)

const showMpQrcode = ref(false)

const showWithdraw = ref(false)

const activity = ref(null)
const lister = ref({
  enabled: true,
  pageable: false,
  modelName: 'coupon_bonus',
  query: {
    activity_id: route.query.activity_id,
  }
})

const showService = ref(false)

const pageLoading = ref(true)

const number = ref(null)

const balance = computed(() => {
  return page.value.lister.lists.reduce((pre, item) => {
    if (item.bonus_status == 1) {
      pre += item.bonus
    }
    return pre
  }, 0)
})

const onMore = () => {
  page.value.nextPage()
}

const onShareList = () => {
  router.push({name: "share", query: {"activity_id": activity.value.id}})
}

const onAssistanceList = () => {
  router.push({name: "assistance", query: {"activity_id": activity.value.id}})
}

const onHome = () => {
  router.push({name: "home", query: {activity_id: activity.value.id}})
}

const onPoster = () => {
  if (touchUser.value && touchUser.value.order && touchUser.value.order.is_pay) {
    router.push({name: "poster", query: {activity_id: activity.value.id}})
  } else {
    onHome()
  }
}

const onDraw = () => {
  router.push({name: "withdraw", query: {activity_id: activity.value.id}})
}

onMounted(async () => {
  await apis.activity.show({
    params: {
      id: route.query.activity_id,
    }
  }).then(({data: result}) => {
    activity.value = result.data
  })

  // 确定邀请关系
  if (user.value.user) {
    await apis.activity.touch({
      params: {
        id: route.query.activity_id,
        sid: route.query.sid // 保存邀请人id
      }
    }).then(({data: result}) => {
      touchUser.value = result.data
    })
  }

  pageLoading.value = false
})
</script>

<style scoped>
.bonusBox span:nth-child(2):before {
  content: "\FFE5";
  font-size: .8rem;
}
</style>